<template>
  <div class="myCheckObject">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
      class="nav-bar"
    >
      <template #right>
        <van-icon name="success" size="20" /><span
          style="color: #fff; font-size: 20px"
          >审批</span
        >
      </template>
    </van-nav-bar>

    <div class="content">
      <van-field
        readonly
        clickable
        label="检验样品："
        v-model="sampleName"
        placeholder="请选择"
        input-align="center"
        @click="showSamplePicker = true"
        class="select-record"
      />
      <div id="reportPdf" ref="reportPdf"></div>
			<HPDFViewer :path="pdfUrl" />
    </div>

    <van-popup
      v-model="showSamplePicker"
      position="bottom"
      round
      :style="{ height: '50%' }"
      :lock-scroll="false"
    >
      <van-cascader
        v-model="sampleValue"
        :options="sampleArr"
        @close="showSamplePicker = false"
        @finish="onSampleFinish"
        :field-names="sampleNames"
      />
    </van-popup>

    <van-popup
      v-model="showItem"
      position="left"
      :style="{ width: '60%', height: '100%' }"
    >
      <div style="font-size: 32px; padding: 10px 0 0 20px">检验审批</div>

      <div
        style="display: flex; align-items: center; justify-content: flex-end"
      >
        <van-button
          type="primary"
          icon="success"
          size="small"
          @click="btnSub('符合规定')"
        >
          符合规定</van-button
        >
        <van-button
          type="danger"
          icon="cross"
          size="small"
          style="margin-left: 20px"
          @click="btnSub('不符合规定')"
          >不符合规定</van-button
        >
        <van-button
          type="warning"
          icon="share-o"
          size="small"
          style="margin: 0 20px"
          @click="btnSub('驳回到待我检验')"
          >驳回到待我检验</van-button
        >
				<van-button
          type="warning"
          icon="share-o"
          size="small"
          style="margin: 0 20px"
          @click="btnSub('驳回到检验校对')"
          >驳回到检验校对</van-button
        >
      </div>

      <van-tag plain type="primary" style="margin: 10px 0px 10px 20px"
        >检验项目</van-tag
      >
      <div class="checkItem">
        <van-list :finished="finished" finished-text="暂无数据">
          <van-cell
            title-class="custom-title"
            value-class="custom-value"
            label-class="custom-label"
            v-for="(v, i) in list"
            :key="i"
            :title="v.attributeName"
          >
            <template #label>
              <div>检验标准：{{ v.attributeStandard }}</div>
              <div>检验结果：{{ v.attributeValue }}</div>
              <div style="display: flex">
                <span>是否通过：</span>
                <van-checkbox
                  v-model="v.checkPass"
                  shape="square"
                  @change="
                    !v.checkPass ? (v.checkMessage = '') : v.checkMessage
                  "
                ></van-checkbox>
              </div>
              <div
                style="display: flex; align-items: center"
                v-if="!v.checkPass"
              >
                <span>驳回意见：</span
                ><van-field
                  v-model="v.checkMessage"
                  style="width: 40%; border: 1px solid #ebedf0; padding: 0"
                />
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
      <div style="display: flex; align-items: center">
        <van-tag
          plain
          type="primary"
          style="
            margin: 10px 0px 10px 20px;
            display: inline-block;
            height: 24px;
          "
          >历史数据</van-tag
        >
      </div>
      <div class="checkItem">
        <van-list :finished="hFinished" finished-text="暂无数据">
          <van-cell
            title-class="custom-title"
            value-class="custom-value"
            label-class="custom-label"
            v-for="(v, i) in hList"
            :key="i"
            :title="v.attributeName"
          >
            <template #label>
              <!-- <div>检验编号：{{ v.testID }}</div>
              <div>报告书编号：{{ v.reportID }}</div> -->
              <div>检验标准：{{ v.attributeStandard }}</div>
              <div>检验结果：{{ v.attributeValue }}</div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </van-popup>
  </div>
</template>

<script type='text/ecmascript-6'>
import HPDFViewer from "@/components/HPDFViewer";
import {
  NavBar,
  Icon,
  Cell,
  CellGroup,
  Button,
  Popup,
  Field,
  Calendar,
  Notify,
  List,
  Tag,
  Picker,
  Dialog,
  DropdownMenu,
  DropdownItem,
  Checkbox,
  cascader,
} from "vant";
import $ from "jquery";
import {
  getTestTree, //
  getTestStandardSelect,
  checkPassword, //
} from "@/api/base";
import {
  selectTestReports,
  getCheckTestAttributes,
  saveApproveTest, //
  previewTestReport, //
  getApproveTestAttributes, //
  getWorkflowPassword, //
} from "@/api/check";
import { to } from "@/utils";

export default {
  name: "checkApprove",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [Notify.name]: Notify,
    [List.name]: List,
    [Tag.name]: Tag,
    [Picker.name]: Picker,
    [Dialog.name]: Dialog,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Checkbox.name]: Checkbox,
    [cascader.name]: cascader,
		HPDFViewer
  },
  data() {
    return {
      token: "",
      sampleName: "", //合并后检验样品
      showSamplePicker: false,
      sampleArr: [],
      sampleValue: "",
      sampleNames: {
        text: "name",
        value: "code",
      },
      materialCode: "",
      loading: false,
      finished: false,
      hFinished: false,
      list: [],
      showPicker: false,
      value1: "01",
      option1: [
        { text: "国内", value: "01" },
        { text: "国外", value: "02" },
      ],
      value2: "",
      option2: [],
      standardCode: "",
      option3: [],
      value3: "",
      testID: "",
      hList: [],
      reportID: "",
      showItem: false,
      pdfh5: null,
      domain: "",
      isPwd: "",
      userId: "",
      saveApproveP: "",
			pdfUrl:''
    };
  },
  watch: {},
  mounted() {
    this.token = localStorage.getItem("tokenKey");
    this.domain = localStorage.getItem("domain");
    this.getSampleData();
  },
  methods: {
    clickLeft() {
      this.$router.replace({ name: "home" });
    },
    async getSampleData() {
      var that = this;
      var queryParams = {
        pageModel: {
          Token: this.token,
          Search: ["60", "UrgencyDegree"],
        },
      };
      const [err, res] = await to(getTestTree(queryParams));
      if (err) return;
      var result = res.Result;
      this.dowhile(result);
      this.sampleArr = result;
    },
    dowhile(b) {
      for (var i = 0; i < b.length; i++) {
        if (b[i].children && b[i].children.length > 0) {
          this.dowhile(b[i].children);
        } else {
          delete b[i].children;
        }
      }
    },
    onSampleFinish({ selectedOptions }) {
      this.showSamplePicker = false;
      var len = selectedOptions.length;
      var toDetail = selectedOptions[len - 1];
      this.sampleName = toDetail.name;
      this.materialCode = toDetail.materialCode;
      this.testID = toDetail.code;
      this.reportID = toDetail.reportID;
      this.getPreviewTestReport();
      this.getWorkflowPassword();
      //   this.getItemList(toDetail.code);
      //   this.getRecordList(this.materialCode);
      //   this.getTestStandardSelect(this.materialCode);
    },
    getItemList(code) {
      var queryParams = { Token: this.token, Search: [code, ""] };
      getCheckTestAttributes(queryParams)
        .then((response) => {
          var result = response.Result.data;
          this.list = result;
          if (this.list.length == 0) {
            this.finished = true;
          }
        })
        .catch(() => {});
    },
    debounce(fn) {
      var that = this;
      var timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn();
          timer = null;
        }, 500);
      };
    },
    onConfirm() {},
    getRecordList(code) {
      var queryParams = { queryModel: { Token: this.token, Code: code } };
      selectTestReports(queryParams)
        .then((response) => {
          var result = response.Result;
          if (result && result.length > 0) {
            this.option2 = result;
            this.value2 = result[0].value;
          }
        })
        .catch(() => {});
    },
    getTestStandardSelect(code) {
      var queryParams = { queryModel: { Token: this.token, code: code } };
      getTestStandardSelect(queryParams)
        .then((response) => {
          var result = response.Result;
          if (result && result.length > 0) {
            result.map((item) => {
              item.value = item.id;
            });
            this.option3 = result;
            this.value3 = result[0].value;
          }
        })
        .catch(() => {});
    },
    getPreviewTestReport() {
      var that = this;
      var param = {
        Token: this.token,
        testId: this.testID,
      };
      previewTestReport(param)
        .then((response) => {
          if (response.ErrorCode == 0) {
            var path = response.Result.path;
            // that.pdfh5 = true;
            // var pdfUrl = that.domain + path;
						if(!path) return Notify({ type: "danger", message: "未找到该文件" });
            that.showPdf = true;
						this.pdfUrl = path;
            // that.renderPdf(pdfUrl);
          }
        })
        .catch(() => {});
    },
    renderPdf(pdfurl) {
      this.pdfh5 = true;
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5(this.$refs.reportPdf, {
          pdfurl,
          lazy: true,
        });
      });
    },
    clickRight() {
      if (this.testID == "") {
        Notify({ type: "danger", message: "请选择检验样品" });
        return false;
      }
      var param = {
        Token: this.token,
        Search: [this.testID, this.reportID],
      };
      getApproveTestAttributes(param)
        .then((response) => {
          if (response.ErrorCode == 0) {
            this.list = response.Result.data;
            this.hList = response.Result.existData;
            if (this.list.length > 0) {
              this.list.map((item) => {
                item.checkPass = true;
                item.checkMessage = "";
              });
            }
            if (this.hList.length > 0) {
              this.hList.map((item) => {
                item.checkPass = true;
                item.checkMessage = "";
              });
            }
          }
        })
        .catch((data) => {});
      this.showItem = true;
    },
    getWorkflowPassword() {
      var pageModel = { Token: this.token, Search: [this.materialCode, "50"] };
      getWorkflowPassword(pageModel)
        .then((response) => {
          if (response.ErrorCode == 0) {
            var res = response.Result;
            this.isPwd = res.isPassword;
            this.userId = res.userId;
          }
        })
        .catch(() => {});
    },
    btnSub(value) {
      var param = {
        Token: this.token,
        materialCode: this.materialCode,
        testID: this.testID,
        number: "50",
        isPass: value,
        checks: this.list,
      };
      this.saveApproveP = param;
      if (this.isPwd) {
        this.checkPassword();
      } else {
        this.saveApprove();
      }
    },
    checkPassword() {
      var that = this;
      var param = {
        Token: this.token,
        userId: this.userId,
        password: "",
      };
      checkPassword(param)
        .then((response) => {
          var res = response.Result;
          if (res) {
            that.saveApprove();
          }
        })
        .catch(() => {});
    },
    saveApprove() {
      var that = this;
      saveApproveTest(this.saveApproveP)
        .then((response) => {
          if (response.ErrorCode == 0) {
            var res = response.Result;
            $("#reportPdf").html("");
            that.getSampleData();
            that.showItem = false;
            that.list = [];
            that.hList = [];
            that.sampleName = "";
            that.sampleValue = "";
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.van-dropdown-menu__bar {
  box-shadow: none;
  align-items: center;
}

.van-checkbox__icon .van-icon {
  width: 1em;
  height: 1em;
  line-height: 1em;
}
/* .history .van-field__control {
  width: 160px;
  border: 1px solid #ebedf0;
} */
</style>
<style scoped lang="less">
/deep/.van-dropdown-menu__item {
  margin-right: 10px;
  border: 1px solid #ebedf0;
  padding: 0.1rem 0 !important;
  height: 0.8rem;
  box-sizing: border-box;
}
.myCheckObject {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
  // color: #fff;
}
.content {
  height: calc(100% - 1rem);
  overflow: auto;
}

.handleContent {
  width: 100%;
}
.van-col-style {
  font-size: 0.36rem;
  color: #000;
  text-align: left;
  padding-left: 0.2rem;
  margin-top: 0.2rem;
}
.van-cell {
  overflow: inherit;
}
.readonly /deep/.van-field__body {
  background: #ddd;
}
/deep/.van-cell {
  padding: 0.2rem 0.4rem;
}
/deep/.van-field__body {
  border-radius: 2px !important;
  border: 1px solid #ddd;
}
/deep/.van-cell {
  font-size: 0.32rem;
}
/deep/.van-cascader__header {
  height: 1rem;
}
/deep/.van-cascader__tabs.van-tabs--line .van-tabs__wrap {
  height: 1rem;
}
.readonly /deep/.van-field__body {
  background: #ddd;
}
/deep/.van-button--small{
  height: 0.75rem;
}
</style>